<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div id="app"></div>
</body>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        //data合并：组件自身的属性优先级高于混合的优先级
        //钩子函数：同名的钩子函数会被合并为一个数组，优先调用混合的钩子函数
       const myMixin = {  //局部mixin
            data() {
              return {
               message:'hello vue.js!!!',
                systeMsg: 'system message !!'
         }
      },
       created() {
            console.log('myMixin --> created',this.systeMsg)
          },
    }
    //app.mixin({ //全局
      //  data() {
      //        return {
      //          message:'hello vue.js!!!',
      //          mixinerror: 'mixin error meesage  !!'
       //     }
       // },
       // created() {
        //        console.log('myMixin --> created',this.mixinError)
        //    },
   // }
   // })
    //vue 根组件，简称 组件
        const app = Vue.createApp({
            mixins:[myMixin],
            data() {
             return {
                    message: 'hello vue.js !!!',
                    systeMsg: 'system message !!'
                }
            },
          
                template:`
                <div>{{ message }} -- 
                    {{mixinError}} --
                    {{systeMsg}}</div>
                        <component-demo

                `,
                created() {
                console.log('app --> created',this.systeMsg)
            },
            })

           const vm = app.mount("#app");
    </script>
</html>